<!DOCTYPE html>
<html lang="en">

<head>
 <meta charset="UTF-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <link rel="stylesheet" type="text/css" href="../../layui/css/layui.css" />
 <script src="../../layui/layui.js"></script>
 <title>布局-- 栅格</title>
</head>

<body>
 <div class="layui-container">
  <h3>栅格系统</h3>
  <p>为了丰富网页布局，简化 HTML/CSS 代码的耦合，并提升多终端的适配能力，layui 在 2.0 的版本中引进了自己的一套具备响应式能力的栅格系统。我们将容器进行了 12 等分，预设了 4*12 种 CSS
   排列类，它们在移动设备、平板、桌面中/大尺寸四种不同的屏幕下发挥着各自的作用</p>
  <h5>一、栅格布局规则：</h5>
  <img src="../../img/16.png" alt="">
  <img src="../../img/17.png" alt="">
  <h5>二、响应式规则：</h5>
  <p>栅格的响应式能力，得益于CSS3媒体查询（Media Queries）的强力支持，从而针对四类不同尺寸的屏幕，进行相应的适配处理</p>
  <img src="../../img/18.png" alt="">
  <h5>三、响应式公共类：</h5>
  <img src="../../img/19.png" alt="">
  <h5>四、布局容器：</h5>
  <p>将栅格放入一个带有 class="layui-container" 的特定的容器中，以便在小屏幕以上的设备中固定宽度，让列可控。</p>
  <p>当然，你还可以不固定容器宽度。将栅格或其它元素放入一个带有 class="layui-fluid" 的容器中，那么宽度将不会固定，而是 100% 适应</p>
  <h5>五、列间距：</h5>
  <img src="../../img/20.png" alt="">
  <h5>六、列偏移：</h5>
  <p>对列追加 类似 layui-col-md-offset* 的预设类，从而让列向右偏移。其中 * 号代表的是偏移占据的列数，可选中为 1 - 12。
   如：layui-col-md-offset3，即代表在“中型桌面屏幕”下，让该列向右偏移 3 个列宽度</p>
  <img src="" alt="">
  <p>请注意，列偏移可针对不同屏幕的标准进行设定，比如上述的例子，只会在桌面屏幕下有效，当低于桌面屏幕的规定的临界值，就会堆叠排列。</p>
  <h5>七、栅格嵌套：</h5>
  <p>理论上，你可以对栅格进行无穷层次的嵌套，这更加增强了栅格的表现能力。而嵌套的使用非常简单。在列元素（layui-col-md*）中插入一个行元素（layui-row），即可完成嵌套。下面是一个简单的例子：</p>
  <h5>八、让IE8/9兼容栅格：</h5>
  <img src="../../img/21.png" alt="">
  <h5>管理系统界面布局</h5>
  <p><a href="https://www.layui.com/demo/layuiAdmin.html">预览</a></p>

 </div>
</body>

</html>